<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>作品集</title>
	<link rel="stylesheet" type="text/css" href="/css/zp.css" />
	<script type="application/javascript" src="/js/jquery-1.7.1.js"></script>
</head>

<body>
<div class="header">
	<div id="menu">
		<ul style="margin-top: 8px;margin-bottom: 0px;">
			<li class="logo">
				<a href="/">CHH</a>
				<a href="/" target="_self" class="menu-a" style="margin-left: 680px;">首页</a>
				<u style="color:#ff55bb;" class="menu-a">设计作品</u>
				<a href="" class="menu-a">给我留言</a>
			</li>
		</ul>
	</div>
</div>
<div id="lunbotu">
	<div id="banner">
		<img class="m" src="/img/banner1.jpg"/>
		<img class="m" src="/img/banner2.jpg"/>
		<img class="m" src="/img/banner3.jpg"/>
	</div>
	<div id="biao">
		<ul>
			<li class="biao_1"></li>
			<li class="biao_1"></li>
			<li class="biao_1"></li>
		</ul>
	</div>
</div>
<div class="pm">
	<img src="/img/zuo.svg"/>&nbsp;&nbsp;平面作品&nbsp;&nbsp;<img src="/img/you.svg"/>
</div>
<center><br><br><br>
	<div id="imgDefault">
		<img class="imgItem" data-src="/img/pm/1_2.jpg" src="/img/pm/1.jpg">
		<img class="imgItem" data-src="/img/pm/2_3.jpg" src="/img/pm/2.jpg">
		<img class="imgItem" data-src="/img/pm/3_4.jpg" src="/img/pm/3.jpg">
		<img class="imgItem" data-src="/img/pm/4_5.jpg" src="/img/pm/4.jpg">
		<img class="imgItem" data-src="/img/pm/5_6.jpg" src="/img/pm/5.jpg">
		<img class="imgItem" data-src="/img/pm/6_7.jpg" src="/img/pm/6.jpg">
		<img class="imgItem" data-src="/img/pm/8_9.jpg" src="/img/pm/8.jpg">
		<img class="imgItem" data-src="/img/pm/9_10.jpg" src="/img/pm/9.jpg">
		<img class="imgItem" data-src="/img/pm/11_12.jpg" src="/img/pm/11.jpg">
		<img class="imgItem" data-src="/img/pm/12_13.jpg" src="/img/pm/12.jpg">
		<img class="imgItem" data-src="/img/pm/13_14.jpg" src="/img/pm/13.jpg">
		<img class="imgItem" data-src="/img/pm/14_15.jpg" src="/img/pm/14.jpg">
	</div>
</center>
<div class="wy">
	<img src="/img/zuo.svg"/>&nbsp;&nbsp;banner&nbsp;&nbsp;<img src="/img/you.svg"/>
</div>
<center><br><br><br>
	<div id="banner_zp">
		<img class="imgItem" data-src="/img/pmbanner/1_2.jpg" src="/img/pmbanner/1.jpg">
		<img class="imgItem" data-src="/img/pm/2_3.jpg" src="/img/pmbanner/2.jpg">
		<img class="imgItem" data-src="/img/pm/3_4.jpg" src="/img/pmbanner/3.jpg">
		<img class="imgItem" data-src="/img/pm/4_4.jpg" src="/img/pm/4.jpg">
		<img class="imgItem" data-src="/img/pm/5_5.jpg" src="/img/pm/5.jpg">
		<img class="imgItem" data-src="/img/pm/6_6.jpg" src="/img/pm/6.jpg">
	</div>
</center>


<a href="www.beian.miit.gov.cn">鄂ICP备19005823号</a>



<script>
    (function(){
        var LightBox = function(options){
            this.imgListParent = document.getElementById(options.imgListParent);   //图片列表的父元素
            this.imgItemClass = options.imgItemClass;   //图片的className
            this.idx = 0;  //图片的索引，初始值为0
            this.isShowPage = options.isShowPage || false;    //是否显示分页，默认不显示
            this.imgWith = options.width;
            this.imgHeight = options.height;
            this.init();
        };
        //初始化
        LightBox.prototype.init = function(){
            this.renderDOM();
            this.imgListClick();
            this.nextBtnClick();
            this.prevBtnClick();
            this.closeBtnClick();
        };
        //渲染弹窗
        LightBox.prototype.renderDOM = function(){
            var imgModule = document.createElement("div");
            imgModule.id = "imgModule";
            var width  = this.imgWith;
            var height = this.imgHeight;
            var left = ($("body").width() - width) / 2;

            var oHtml = "";
            oHtml += '<div class="mask"></div>';
            oHtml +=    '<div class="lightBox">';
            oHtml +=        '<div class="lightBoxContent" style="width:' + width +'px; height:' + height + 'px; left:'+ left + 'px;">';
            oHtml +=            '<img src="/img/loading.gif" alt="" id="imgLoader">';
            oHtml +=            '<img alt="" id="imgLight">';
            oHtml +=        '</div>';
            oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';
            oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';
            oHtml +=        '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';
            oHtml +=        '<div class="lightBoxPagination" id="lightBoxPagination" ></div>';
            oHtml +=    '</div>';

            imgModule.innerHTML = oHtml;
            document.body.appendChild(imgModule);
        };
        //分页
        LightBox.prototype.pagination = function(idx){
            var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
            var pagination = document.getElementById("lightBoxPagination");
            var page = "";

            for(var i = 0; i < imgList.length; i++){
                if(idx == i){
                    page += '<span class="current"></span>';
                }else{
                    page += '<span></span>';
                }
            }
            if(this.isShowPage){
                pagination.innerHTML = page;
            }
        };
        //点击图片弹出弹窗
        LightBox.prototype.imgListClick = function(){
            var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
            var imgModule = document.getElementById("imgModule");
            var self = this;

            for(var i = 0; i < imgList.length; i++){
                imgList[i].index = i;

                imgList[i].onclick = function(){
                    imgModule.style.display = "block";
                    var src = this.getAttribute("data-src");
                    self.idx = this.index;

                    self.imgLoad(src);
                    self.pagination(self.idx);
                }
            }
        };
        //上一张
        LightBox.prototype.prevBtnClick = function(){
            var prevBtn = document.getElementById("lightBoxPrev");
            var self = this;

            prevBtn.onclick = function(){
                var imgList = self.getByClass(self.imgListParent, self.imgItemClass);

                self.idx--;

                if(self.idx < 0){
                    self.idx = imgList.length - 1;
                }

                var src = imgList[self.idx].getAttribute("data-src");
                self.imgLoad(src);
                self.pagination(self.idx);
            }
        };
        //下一张
        LightBox.prototype.nextBtnClick = function(){
            var nextBtn = document.getElementById("lightBoxNext");
            var self = this;

            nextBtn.onclick = function(){
                var imgList = self.getByClass(self.imgListParent, self.imgItemClass);

                self.idx++;

                if(self.idx >= imgList.length){
                    self.idx = 0;
                }

                var src = imgList[self.idx].getAttribute("data-src");
                self.imgLoad(src);
                self.pagination(self.idx);
            }
        };
        //图片预加载
        LightBox.prototype.imgLoad = function(src, callback){
            var imgLight = document.getElementById("imgLight");
            var loader = document.getElementById("imgLoader");
            loader.style.display = "block";
            // imgLight.src = "";

            var img = new Image();
            img.onload = function(){
                loader.style.display = "none";
                imgLight.src = src;
            };
            img.src = src;
        };
        //关闭弹窗
        LightBox.prototype.closeBtnClick = function(){
            var closeBtn = document.getElementById("closeBtn");
            var imgModule = document.getElementById("imgModule");

            closeBtn.onclick = function(){
                imgModule.style.display = "none";
            }
        };
        //封装获取元素函数
        LightBox.prototype.getByClass = function(oParent, oClass){
            var oEle = oParent.getElementsByTagName("*");
            var oResult = [];

            for(var i = 0; i < oEle.length; i++){
                if(oEle[i].className == oClass){
                    oResult.push(oEle[i]);
                }
            }
            return oResult;
        };
        window.LightBox = LightBox;
    })();
    // 初始化平面作品
    new LightBox({
                     imgListParent: "imgDefault",
                     imgItemClass: "imgItem",
                     isShowPage: true,
                     width:475,
                     height:680
                 });
    // banner
    new LightBox({
                     imgListParent: "banner_zp",
                     imgItemClass: "imgItem",
                     isShowPage: true,
                     width:1180,
                     height:491
                 })
</script>


<!--轮播图js-->
<script type="text/javascript">
    var slid = document.getElementById("banner");
    //var id = document.getElementById("bt");
    var imgwidth = document.getElementsByClassName("m");
    var oli=document.getElementsByClassName("biao_1");
    //console.log(oli);
    //console.log(imgwidth );
    var i =0;
    auto();
    oli[0].style.cssText="background:#ff6700;color:#fff;";
    function auto(){

        time = setInterval(function(){
            i++;
            if(i <= 2) {
                slid.style.left = slid.offsetLeft - 1180 + "px";
                oli[i].style.cssText="background:#ff6700;color:#fff;";
                oli[i-1].style.cssText="background:none;color:#000;";
            } else {
                slid.style.left ="0px";
                oli[2].style.cssText="background:none;color:#000;";
                oli[0].style.cssText="background:#ff6700;color:#fff;";
                i=0;
            }
        }, 3000)

    }

    for(var j=0;j<=2;j++){
        //console.log(imgwidth[j].index);
        imgwidth[j].index=j;
        oli[j].index=j;
        oli[j].onmouseover=function(){
            this.style.cssText="background:#ff6700;color:#fff;"
            this.onmouseout=function(){
                this.style.cssText="background:none;color:#000;"
            }
        }

        oli[j].onclick=function(){
            clearInterval(time);
            m=this.index;
            slid.style.left=-m*1180+"px";
            i=m;
            auto();
        }
    }
</script>
</body>
</html>
